import React, { useState } from "react";
import { View } from "@tarojs/components";

import "./index.scss";
import { usePageScroll } from "@tarojs/taro";
import { getSystemInfoSync } from "@tarojs/taro";

interface NavBarProps {}

const NavBar: React.FC<NavBarProps> = ({}) => {
  const [opacity, setOpacity] = useState(0);

  usePageScroll((res) => {
    // console.log(res.scrollTop);

    let maxScroll = 50; // 设置最大滚动距离为50
    if (process.env.TARO_ENV === "weapp") {
      maxScroll = 50; // 设置最大滚动距离为50
    } else if (process.env.TARO_ENV === "h5") {
      maxScroll = 150; // 设置最大滚动距离为150
    }

    const newOpacity = Math.min(res.scrollTop / maxScroll, 1);
    setOpacity(newOpacity);
  });

  const systemInfo = getSystemInfoSync();
  const statusBarHeight = systemInfo.statusBarHeight || 0; // 获取状态栏高度

  return (
    <>
      <View
        className="navBar-Occupancy"
        style={{ paddingTop: `${statusBarHeight}px` }}
      />

      <View
        className="navBar"
        style={{
          backgroundColor: `rgba(255, 255, 255, ${opacity})`,
          paddingTop: `${statusBarHeight}px`,
        }}
      >
        <View className="navBarTop"></View>
        NavBar
        {opacity}
      </View>
    </>
  );
};

export default NavBar;
